<template>
  <div class="app-container">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <Edit :infoid="id" :cfajbh="cfajbh" :read-only="readOnly" :timestamp="timestamp" :step="step" :show-step="showStep" @dialogHide="dialogHide($event)" />
    </el-dialog>
    <el-dialog
      title="案件详情"
      :visible.sync="allDialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <allDetail :infoid="id" :cfajbh="cfajbh" :read-only="readOnly" :timestamp="timestamp" :step="step" :show-step="showStep" @dialogHide="dialogHide($event)" />
    </el-dialog>

    <div class="filter-container">
      <div style="float:left;">
        <el-input v-model="listQuery.ajh" placeholder="请输入案件号" style="width: 200px;margin-left: 10px;" class="filter-item" @change="handleFilter" />
        <!-- <el-input v-model="listQuery.cfajbh" placeholder="请输入处非案件编号" style="width: 200px;margin-left: 10px;" class="filter-item" /> -->
        <el-input v-model="listQuery.ajmc" placeholder="请输入案件名称关键词" style="width: 200px;margin-left: 10px;" class="filter-item" @change="handleFilter" />
        <!-- <el-select v-model="listQuery.classCode" placeholder="请选择状态" clearable style="margin-left: 10px;width: 200px" class="filter-item">
          <el-option label="全部" value="" />
          <el-option v-for="(it,index) in classList" :key="index" :label="it.label" :value="it.value" />
        </el-select> -->
        <!-- <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;">
          搜索
        </el-button> -->
      </div>
      <el-button v-if="unitName==='公安'&&roleName==='录入'" class="filter-item" type="success" icon="el-icon-edit" style="margin-left: 10px;float:right" @click="addnew">
        立案侦查
      </el-button>
      <!-- <el-popconfirm v-if="roleEdit" title="确定批量删除所选信息吗？" style="margin-left:10px;float:right" @onConfirm="deleteData()">
        <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
      </el-popconfirm> -->
    </div>
    <template>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <!-- <el-table-column v-if="roleEdit" type="selection" width="50" align="center" /> -->

        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50px"
          :index="indexMethod"
        />
        <el-table-column align="center" prop="ajh" label="案件号" width="210px" sortable="custom" />
        <!-- <el-table-column align="center" prop="cfajbh" label="处非案件编号" width="130px" sortable="custom" /> -->

        <el-table-column min-width="80px" prop="ajmc" label="案件名称" sortable="custom" />
        <el-table-column width="105px" prop="lasj" align="center" label="立案时间" sortable="custom" />
        <!-- <el-table-column width="110px" prop="submitUser" align="center" label="当前状态" sortable="custom">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="基本信息" width="115px" prop="submitUser" align="center">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" content="未审核" placement="top">
              <i class="el-icon-success" style="margin-right:5px;color:#11b95c" />
            </el-tooltip> -->
            <span v-if="scope.row.gazt===0" style="color:#FFBA00">办理中</span>
            <span v-if="scope.row.gazt===1" style="color:#11b95c">已完成</span>
            <el-button v-if="canEdit(scope.row.gazt)" size="small" type="text" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'create',scope.row.cfajbh)" />
            <el-button v-else size="small" type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'create',scope.row.cfajbh)" />
          </template>
        </el-table-column>
        <el-table-column label="核查登记" width="115px" prop="submitUser" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.hcdjCount&&!scope.row.hcdjShzt" style="color:#FFBA00">办理中</span>
            <span v-if="scope.row.hcdjShzt===1" style="color:#11b95c">已完成</span>
            <span v-if="scope.row.hcdjCount===0&&!scope.row.hcdjShzt" style="color:#FF4949">未完成</span>
            <el-button v-if="canEdit(scope.row.hcdjShzt)" size="small" type="text" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'hcdj',scope.row.cfajbh)" />
            <el-button v-if="!canEdit(scope.row.hcdjShzt)&&scope.row.hcdjCount" size="small" type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'hcdj',scope.row.cfajbh)" />
          </template>
        </el-table-column>
        <el-table-column label="司法审计" header-align="center">
          <el-table-column width="115px" prop="description" label="审计信息" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sfsjCount&&!scope.row.sfsjShzt" style="color:#FFBA00">办理中</span>
              <span v-if="scope.row.sfsjShzt===1" style="color:#11b95c">已完成</span>
              <span v-if="scope.row.sfsjCount===0&&!scope.row.sfsjShzt" style="color:#FF4949">未完成</span>
              <el-button v-if="canEdit(scope.row.sfsjShzt)" size="small" type="text" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'sfsj',scope.row.cfajbh)" />
              <el-button v-if="!canEdit(scope.row.sfsjShzt)&&scope.row.sfsjCount" size="small" type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'sfsj',scope.row.cfajbh)" />
            </template>
          </el-table-column>
          <el-table-column label="最终报告" prop="nodeText" width="80" align="center">
            <template slot-scope="scope">
              <!-- <i class="el-icon-remove-outline" style="margin-right:5px;color:#999" /> -->
              <span v-if="scope.row.sfsjCount&&scope.row.sfcjzzsjbg==='1'" style="color:#11b95c">已出具</span>
              <span v-else style="color:#999">未出具</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column width="115px" prop="create_date" align="center" label="移送审查起诉">
          <template slot-scope="scope">
            <!--
            <span v-if="scope.row.ysscqsCount&&!scope.row.ysscqsShzt" style="color:#000">已录入</span>
            <span v-if="scope.row.ysscqsShzt===1" style="color:#1890FF">已提交</span>
            <span v-if="scope.row.ysscqsShzt===2" style="color:#11b95c">审核通过</span>
            <span v-if="scope.row.ysscqsShzt===3" style="color:#FF4949">审核未通过</span>
            <span v-if="scope.row.ysscqsCount===0&&!scope.row.ysscqsShzt" style="color:#999">未录入</span> -->
            <!--
            <el-button v-if="canEdit(scope.row.ysscqsShzt)" size="small" type="text" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'ysscqs',scope.row.cfajbh)" />
            <el-button v-if="!canEdit(scope.row.ysscqsShzt)&&scope.row.ysscqsCount" size="small" type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'ysscqs',scope.row.cfajbh)" /> -->
            <el-button type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'ysscqs',scope.row.cfajbh)">查看</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column width="115px" prop="create_date" align="center" label="销撤并案">
          <template slot-scope="scope">

            <span v-if="scope.row.cxaCount&&!scope.row.cxaShzt" style="color:#000">已录入</span>
            <span v-if="scope.row.cxaShzt===1" style="color:#1890FF">已提交</span>
            <span v-if="scope.row.cxaShzt===2" style="color:#11b95c">审核通过</span>
            <span v-if="scope.row.cxaShzt===3" style="color:#FF4949">审核未通过</span>
            <span v-if="scope.row.cxaCount===0&&!scope.row.cxaShzt" style="color:#999">未录入</span>
            <el-button v-if="canEdit(scope.row.cxaShzt)" size="small" type="text" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'cxa',scope.row.cfajbh)" />
            <el-button v-if="!canEdit(scope.row.cxaShzt)&&scope.row.cxaCount" size="small" type="text" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'cxa',scope.row.cfajbh)" />
          </template>
        </el-table-column> -->
        <!-- <el-table-column width="150px" prop="replenish" align="center" label="补侦次数及时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.replenish }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column width="120px" prop="bafzr" align="center" label="办案民警" sortable="custom" /> -->
        <el-table-column width="105px" prop="lrryxm" align="center" label="录入人员" sortable="custom" />
        <el-table-column width="105px" prop="shryxm" align="center" label="审核人员" sortable="custom" />
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-search" @click="allDetail(scope.row.id,'create',scope.row.cfajbh,scope.row)">详情</el-button>
            <el-button v-if="canEdit(scope.row.cxaShzt)" size="small" type="warning" icon="el-icon-edit" style="margin-left:10px;" @click="mod(scope.row.id,'cxa',scope.row.cfajbh)">销撤并案</el-button>
            <el-button v-if="!canEdit(scope.row.cxaShzt)&&scope.row.cxaCount" size="small" type="info" icon="el-icon-search" style="margin-left:10px;" @click="detail(scope.row.id,'cxa',scope.row.cfajbh,scope.row)">销撤并案</el-button>
            <!-- <el-button size="small" type="success" @click="mod(scope.row)">移送审查起诉</el-button> -->
            <el-popconfirm v-if="canEdit(scope.row.gazt)" title="确定删除该信息吗？" style="margin-left:10px;" @onConfirm="deleteData(scope.row.id)">
              <el-button slot="reference" type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Edit from './components/ArticleDetail'
import allDetail from './components/ArticleDetail'

export default {
  name: 'ArticleList',
  components: { Pagination, Edit, allDetail },
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    isSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      unitName: '',
      roleName: '',
      cfajbh: '',
      showStep: [],
      showAddBtn: false,
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      classList: [],
      classForm: {
        parentClass: 14,
        label: ''
      },
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '',
      dialogVisible: false,
      allDialogVisible: false,
      readOnly: false,
      timestamp: '',
      list: [
      ],
      list2: [],
      list3: [],
      total: 0,
      listLoading: true,
      listQuery: {
        ajh: '',
        cfajbh: '',
        ajmc: '',
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: '',
      step: '',
      showThansferBtn: false,
      knowledgeVisible: false
    }
  },
  watch: {
    isEdit: {
      handler(val) {
        console.log('isEdit:' + val)
        this.roleEdit = val
      },
      immediate: true
    },
    isSelection: {
      handler(val) {
        console.log('isSelection:' + val)
        this.selection = val
      },
      immediate: true
    }
  },
  mounted() {
    const userinfo = JSON.parse(localStorage.getItem('user'))

    this.unitName = userinfo.unitName
    this.roleName = userinfo.roleName
    if (JSON.parse(localStorage.getItem('user')).auths.includes('AUTH_input')) {
      this.showAddBtn = true
    } else {
      this.showAddBtn = false
    }
  },
  created() {
    const para = JSON.parse(localStorage.getItem('para'))
    if (para) {
      this.listQuery.ajh = para.ajh
      this.listQuery.cfajbh = para.cfajbh
      this.listQuery.ajmc = para.ajmc
      this.Sortkey = para.orderField
      this.Isace = para.orderType
      this.listQuery.page = para.pageNum
      this.listQuery.limit = para.pageSize
    }
    this.getList()
    if (JSON.parse(localStorage.getItem('user')).auths.includes('AUTH_close')) {
      this.showThansferBtn = true
    } else {
      this.showThansferBtn = false
    }
  },
  methods: {
    indexMethod(index) {
      index = (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit
      return index
    },
    canEdit(zt) {
      if (this.unitName === '公安' && this.roleName === '录入') {
        if (zt === 1 || zt === 2) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    replaceHtml(str) {
      if (str && str !== '') {
        var re = new RegExp('<[^<>]+>', 'g')
        var text1 = str.replace(re, '')
        return text1
      } else {
        return str
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteData(id) {
      this.$http
        .get('/api/ga/removeGa?id=' + id)
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    saveToQuestion(id) {
      this.$http
        .post('/api/workOrder/saveToQuestion', { orderId: id })
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    mod(id, step, cfajbh) {
      // <Edit :infoid="id" :cfajbh="cfajbh" :read-only="readOnly" :timestamp="timestamp" :step="step" :show-step="showStep" @dialogHide="dialogHide($event)" />
      this.id = id
      this.cfajbh = cfajbh
      this.readOnly = false
      this.dialogtitle = '编辑'
      // this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = step
      this.showStep = ['create', 'hcdj', 'sfsj', 'ysscqs']
      if (step === 'cxa') {
        this.showStep.push('cxa')
      }
      this.$router.push({ name: 'detail', query: { infoid: this.id, cfajbh: this.cfajbh, readOnly: this.readOnly, timestamp: this.timestamp, step: this.step, showStep: this.showStep }})
    },
    detail(id, step, cfajbh, data) {
      this.id = id
      this.cfajbh = cfajbh
      this.readOnly = true
      this.dialogtitle = '查看'
      // this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = step
      this.showStep = ['create', 'hcdj', 'sfsj', 'ysscqs']
      if (data && data.cxaCount) {
        this.showStep.push('cxa')
      }
      this.$router.push({ name: 'detail', query: { infoid: this.id, cfajbh: this.cfajbh, readOnly: this.readOnly, timestamp: this.timestamp, step: this.step, showStep: this.showStep }})
    },
    allDetail(id, step, cfajbh, data) {
      this.id = id
      this.cfajbh = cfajbh
      this.readOnly = true
      // this.allDialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = step
      this.showStep = ['create', 'hcdj', 'sfsj', 'ysscqs']
      if (data.cxaCount > 0) {
        this.showStep.push('cxa')
      }
      this.$router.push({ name: 'detail', query: { infoid: this.id, cfajbh: this.cfajbh, readOnly: this.readOnly, timestamp: this.timestamp, step: this.step, showStep: this.showStep }})
    },
    knowledge(id) {
      this.id = id
      this.knowledgeVisible = true
      this.timestamp = new Date().getTime()
    },
    addnew() {
      this.id = 0
      this.readOnly = false
      this.dialogtitle = '立案侦查'
      this.dialogtitle = '详情'
      // this.dialogVisible = true
      this.timestamp = new Date().getTime()
      this.step = 'create'
      this.showStep = ['create']
      this.$router.push({ name: 'detail', query: { infoid: this.id, cfajbh: this.cfajbh, readOnly: this.readOnly, timestamp: this.timestamp, step: this.step, showStep: this.showStep }})
    },
    dialogHide(flag) {
      this.dialogVisible = false
      this.knowledgeVisible = false
      this.getList()
    },
    getList() {
      const para = {
        ajh: this.listQuery.ajh,
        cfajbh: this.listQuery.cfajbh,
        ajmc: this.listQuery.ajmc,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
        // publishTime: this.listQuery.publishTime,
        // title: this.listQuery.title
      }
      console.log(this.listQuery.page)
      this.listLoading = true
      this.$http
        .post('/api/ga/queryByPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total

            localStorage.removeItem('para')
            localStorage.setItem('para', JSON.stringify(para))
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
